<template>
    <div class="contactUsList">
       <div class="aboutTitle">
          <p class="aboutName">
            <ul>
               <li>{{$t('title.contactUs')}}</li>
               <li><router-link  :to="{path:'/aboutUs'}">{{$t('title.aboutWenno')}}</router-link></li>
               <li><router-link  :to="{path:'/retail'}">{{$t('title.retail')}}</router-link></li>              
            </ul>
          </p>
       </div>
       <div class="usList">
       	   <div class="listBox">
	       	   <div class="left">
	       	   	   <p class="contactTitle">{{$t('contact.contactInformation')}}</p>
	       	   	   <span>{{$t('bottom.telephone')}}: (+852) 2464 8378 </span>
	       	   	   <span>{{$t('bottom.telephone')}}: (+852) 2463 6704 </span>
	       	   	   <span><a href="mailto:marketing@shtoys.com.hk">marketing@shtoys.com.hk </a></span>
	       	   	   <input type="text" :placeholder="$t('contact.name')" class="name" ref="name"><!-- placeholder="Name" -->
	       	   	   <input type="text" :placeholder="$t('contact.email')" class="email" ref="email">
	       	   </div>
	       	   <div class="right">
	       	   	   <p class="contactTitle">{{$t('contact.Showroom')}} </p>
	       	   	   <span>Room 05, 6/F, Houston Centre,63 Mody Road,Tsim Sha Tsui East, Kowloon Hong Kong </span>
	       	   	   <div class="conter">
	       	   	   	  <textarea class="tValue" :placeholder="$t('contact.message')" ref="Message"></textarea>
	       	   	   </div>
	       	   </div>       	  	
       	   </div>
       	   <button @click="submit">{{$t('contact.sendMessage')}}</button>
       </div>
    </div>
</template>
<script>
export default {
  name: "contactUsList",
  data () {
    return {
        name:'我要测试首页'
    }
  },
  mounted:function(){ 
       window.scrollTo(0, 0);
  },
  methods:{
     submit(){
         var submit = this.$t("contact.submit");
        this.$loading(submit);
        if(this.$refs.name.value==""||this.$refs.email.value==""||this.$refs.Message.value==""){
            self.$toast.center(self.$t("contact.submission"));
        }else{
            var data = {
                name: this.$refs.name.value,
                email: this.$refs.email.value,
                message: this.$refs.Message.value
            };
            console.log(JSON.stringify(data));
            let self = this;
            axios.post('/api/contact',data)
            .then(function (response) {
                 console.log(JSON.stringify(response.status));
                 self.closeLoading();
                 if(response.status==200){
                    self.$toast.center(self.$t("contact.submited"));
                 }else{
                    self.$toast.center(self.$t("contact.Submission"));
                 }
                 
            })
            .catch(function (error) {
                 console.log(error);
            });          
        }

     },
     closeLoading(){
        this.$loading.close();
    }
  }
};
</script>
<style scoped>
.aboutTitle{width:100%;background:#fff6e9;height:64px;line-height:64px;}
.aboutTitle p.aboutName{width:70%;margin:0px auto;text-align:left;font-size:1.45rem;color:#7b5c55;font-weight:bold;letter-spacing:0.02rem}
.aboutTitle p ul{width:100%;height:100%;}
.aboutTitle p li{float:left;list-style: none;}
.aboutTitle p li{width:30%;text-align:center;font-size:0.9rem;font-weight:normal;cursor: pointer;}
.aboutTitle p li a{color:#7b5c55;}
.aboutTitle p li:first-child{width:40%;text-align:left;font-size:1.41rem;color:#7b5c55;font-weight:580;}
.usList{width:70%;padding:3rem 0rem;margin:0px auto;text-align:left;color:#7b5c55;min-height:calc(100vh - 225px);}
.usList button{width:100%;height:50px;line-height:50px;text-align:center;border-radius:6px;background:#ead3b0;border:none;outline:0;color:#7b5c55;font-size:1.2rem;letter-spacing:1px;}
.listBox{width:100%;height:380px;}
.left{width:47%;height:100%;float:left;}
.right{width:47%;height:100%;float:right;}
.contactTitle{width:100%;height:60px;line-height:60px;font-size:1.1rem;}
.left span,.right span{width:100%;display:block;line-height:28px;font-size:0.92rem;}
.left span a{color:#7b5c55;}
.left input{display:block;width:80%;height:48px;line-height:48px;border:1px solid #ead3b0;border-radius:8px;margin-top:2rem;text-indent:1rem;font-size:1rem;}
.right span{height:88px;}
.conter{width:94%;min-height:120px;max-height:240px;margin-top:26px;overflow:hidden;border-radius:6px;}
.tValue{font-size:1rem;color:#7b5c55;overflow-y:hidden;width:92%;height:130px;max-height:220px;line-height:24px;display:block;resize: none;word-wrap:break-word; word-break:break-all; text-align: justify;text-justify: inter-ideograph;border:1px solid #ead3b0;border-radius:6px;padding:0.5rem 1rem;overflow-y:hidden;word-wrap: break-word;word-break:keep-all;}
 @media screen and (max-width: 768px) {
   	.usList{padding-top:1rem;}
    .left{width:100%;height:310px;}
    .left input{height:40px;line-height:40px;width:100%;}
    .contactTitle{font-size:1rem}
    .right{width:100%;}
    .left span,.right span{font-size:0.82rem;}
    .tValue{text-indent:0.2rem;width:100%;max-height:200px;}
    .usList button{height:46px;line-height:46px;font-size:1rem;letter-spacing:0.5px;}
    .aboutTitle p.aboutName{width:90%;height:100%;}
    .aboutTitle p li{font-size:0.65rem;width:36%;}
    .aboutTitle p li:first-child{width:44%;font-size:0.9rem;}
    .aboutTitle p li:last-child{width:20%;}
    .usList{width:90%;}
    .usList span{font-size:0.8rem;}
 }
</style>